<template>
  <div class="container contract-review pb">
    <p class="bread">
      <a href="#/personalcenter">个人中心</a> >
      <a href="#/personalcenter/transac" class="font-s-18">订单管理</a> >
      <a href="javascript:void(0);" class="font-s-16">交易监控</a>
    </p>
    <div class="bg-c-fff box-border">
      <h3 class="tm-title">交易监控服务</h3>
      <step :stepData="stepData" :stepNum="stepNum" @stepRouter="stepRouter"></step>
    </div>
    <div class="content">
      <div class="bg-c-fff box-border box">
        <div class="tr step-top-button" v-show="jurisdicShow">
          <button class="white-button small-btn small-btn-css" @click="msgShow = true">发送消息</button>
        </div>
        <ul class="fix operation-box" :class="{'box-border-top':jurisdicShow}">
          <li class="flo-left tc">1.上传待审查合同</li>
          <li class="flo-right fix">
            <file-num :fileNum="pendingContracts.length" class="filenum-css"></file-num>
            <div class="button-box flo-left" :class="{jurisdicClass:!jurisdicShow}">
              <button @click="checkPendingContract" class="small-blue-btn small-btn-css db">查看</button>
              <button class="small-blue-btn small-btn-css" id="pendingUploaderBtn" v-show="jurisdicShow">上传</button>
            </div>
          </li>
        </ul>
        <ul class="fix box-border-top operation-box">
          <li class="flo-left tc">2.接收审查报告</li>
          <li class="flo-right fix">
            <file-num :fileNum="reportNum" class="filenum-css"></file-num>
            <div class="button-box flo-left">
              <button class="small-blue-btn small-btn-css db" @click="onCheckContractReport">查看</button>
            </div>
          </li>
        </ul>
        <ul class="fix box-border-top operation-box">
          <li class="flo-left tc">3.上传正式合同</li>
          <li class="flo-right fix">
            <file-num :fileNum="formalNum" class="filenum-css"></file-num>
            <div class="button-box flo-left">
              <button id="formalUploaderBtn" class="small-blue-btn small-btn-css" v-show="jurisdicShow&&this.formalNum===0" @click="onFormalClick">上传</button>
              <a :href="address" download class="small-blue-btn small-btn-css db tc" v-show="!jurisdicShow||this.formalNum!=0">查看</a>
            </div>
          </li>
        </ul>
      </div>
      <div class="box next-box bg-c-fff tc" v-show="jurisdicShow">
        <button type="button" class="auto blue-button next" @click="onNextStep">下一步</button>
      </div>
    </div>
    <vodal :show="pendingContractShow" animation="zoom" :width="600" :height="500" @hide="pendingContractShow = false">
      <file-browser type="contract" :files="pendingContracts" ref="pendingFileBrowser"></file-browser>
    </vodal>
    <vodal :show="checkContractReportShow" animation="zoom" :width="600" :height="500" @hide="checkContractReportShow = false">
      <file-browser type="contract" :files="checkContractReports" ref="checkFileBrowser"></file-browser>
    </vodal>
    <vodal :show="msgShow" animation="zoom" :width="380" :height="283" @hide="msgShow = false">
      <div class="vodal-main vodal-xxbox">
        <h4>发送消息</h4>
        <ul class="con">
          <li>消息内容：
            <textarea class="vt" placeholder="请输入消息内容，我们将发送给信宝相关工作人员处理" v-model="msgContent"></textarea>
          </li>
        </ul>
        <div class="tc auto vodal-btn-box">
          <button class="blue-button" @click="onMsgSubmit">确认</button>
          <button class="white-button" @click="msgShow = false">取消</button>
        </div>
      </div>
    </vodal>
    <vodal :show="uploadShow" animation="zoom" :width="380" :height="275" @hide="uploadShow = false">
      <div class="vodal-main">
        <h4>上传待审核文件</h4>
        <ul class="con">
          <li>请选择文件上传，上传成功后，我们将尽快为您审核。</li>
          <li>文件名称：
            <input type="text" placeholder="请输入文件名称" class="input-css">
          </li>
          <li>上传文件：
            <input type="button" value="选择文件" class="blue-button small-btn-css">
            <input type="file" class="rel small-btn-css small-file-css">
          </li>
        </ul>
        <div class="tc auto vodal-btn-box">
          <button class="blue-button" @click="uploadShow = false">确认</button>
          <button class="white-button" @click="uploadShow = false">取消</button>
        </div>
      </div>
    </vodal>
    <vodal :show="isContractShow" animation="zoom" :width="1000" :height="620" @hide="isContractShow=false">
      <div class="vodal-main">
        <h4>合同审查表{{index}}</h4>
        <div class="con">
          <table width="100%">
            <tr>
              <th colspan="4">合同审查表</th>
            </tr>
            <tr>
              <td width="100px">序号</td>
              <td width="300px">审查项目</td>
              <td width="500px">具体内容</td>
              <td width="200px">备注</td>
            </tr>
            <tr>
              <td>1</td>
              <td>待审查项目与监控申请单一致性</td>
              <td class="choose-box">
                <input type="radio" name="same" id="same" value="1" v-model="uniformity" disabled>
                <label for="same">一致</label>
                <br>
                <input type="radio" name="same" id="notsame" value="0" v-model="uniformity" disabled>
                <label for="notsame">不一致</label>
              </td>
              <td>
                <textarea v-model="uniformityRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>合同合法性</td>
              <td class="choose-box">
                <input type="radio" name="legal" id="legal" value="1" v-model="legitimacy" disabled>
                <label for="legal">合法</label>
                <br>
                <input type="radio" name="legal" id="notlegal" value="0" v-model="legitimacy" disabled>
                <label for="notlegal">不合法</label>
              </td>
              <td>
                <textarea v-model="legitimacyRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>主要法律法规、条款</td>
              <td class="choose-box">
                <textarea class="tex-css" placeholder="类型" v-model="type" disabled></textarea>
              </td>
              <td>
                <textarea v-model="typeRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>主要条款</td>
              <td class="choose-box">
                <ul>
                  <li>
                    <input type="checkbox" name="" id="theSubject" value="标的" v-model="mainTerms" disabled>
                    <label for="theSubject">标的</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="price" value="价格" v-model="mainTerms" disabled>
                    <label for="price">价格</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="payment" value="支付方式" v-model="mainTerms" disabled>
                    <label for="payment">支付方式</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="transport" value="运输" v-model="mainTerms" disabled>
                    <label for="transport">运输</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="deliver" value="交付" v-model="mainTerms" disabled>
                    <label for="deliver">交付</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="ys" value="验收" v-model="mainTerms" disabled>
                    <label for="ys">验收</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="install" value="安装" v-model="mainTerms" disabled>
                    <label for="install">安装</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="warranty" value="质保" v-model="mainTerms" disabled>
                    <label for="warranty">质保</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="breachOfContract" value="违约" v-model="mainTerms" disabled>
                    <label for="breachOfContract">违约</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="jurisdiction" value="管辖权" v-model="mainTerms" disabled>
                    <label for="jurisdiction">管辖权</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="notification" value="通知送达" v-model="mainTerms" disabled>
                    <label for="notification">通知送达</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="takeEffect" value="生效" v-model="mainTerms" disabled>
                    <label for="takeEffect">生效</label>
                  </li>
                </ul>
              </td>
              <td>
                <textarea v-model="mainRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>5</td>
              <td>具体条款</td>
              <td class="choose-box">
                <input type="checkbox" name="" id="qymqx" value="权益明确性" v-model="specificTerms" disabled>
                <label for="qymqx">权益明确性</label>
                <br>
                <input type="checkbox" name="" id="bsmqx" value="表述确定性" v-model="specificTerms" disabled>
                <label for="bsmqx">表述精确性</label>
              </td>
              <td>
                <textarea v-model="specificRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>6</td>
              <td>资质审查中问题的对策</td>
              <td class="choose-box">
                <input type="radio" name="" id="y" value="1" v-model="countermeasure" disabled>
                <label for="y">有</label>
                <br>
                <input type="radio" name="" id="w" value="0" v-model="countermeasure" disabled>
                <label for="w">无</label>
              </td>
              <td>
                <textarea v-model="countermeasureRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Vodal from 'Vodal'
import Step from '../components/Step'
import FileNum from '../components/FileNum'
import FileUploadManager from '../components/FileUploaderManager'
import FileBrowser from '../components/FileBrowser'
export default {
  components: {
    Vodal,
    Step,
    FileNum,
    FileBrowser
  },
  data() {
    return {
      pendingUploader: null,
      pendingContracts: [],
      checkContractReports: [],
      formalUploader: null,
      formalNum: 0,
      stepNum: 2,
      reportNum: 0,
      filenum4: '',
      status: 0,
      isSubmitting: false,
      stepData: [{
        name: '提交服务申请'
      }, {
        name: '确认资质报告'
      }, {
        name: '合同审查'
      }, {
        name: '绘制流程图'
      }, {
        name: '交易监控'
      }, {
        name: '服务评价'
      }],
      pendingContractShow: false,
      checkContractReportShow: false,
      isContractShow: false,
      uploadShow: false,
      customizShow: false,
      msgShow: false,
      msgContent: '',
      jurisdicShow: true,
      address: '',
      name: '',
      phone: '',
      email: '',
      remark: '',
      list: [],
      index: 0,
      uniformity: '',
      uniformityRemarks: '',
      legitimacyRemarks: '',
      legitimacy: '',
      type: '',
      typeRemarks: '',
      mainTerms: [],
      mainRemarks: '',
      specificRemarks: '',
      specificTerms: [],
      countermeasure: '',
      countermeasureRemarks: ''
    }
  },
  mounted() {
    this.initPendingUploader()
    this.getData()
  },
  methods: {
    onNextStep() {
      if (this.formalNum) {
        if (!this.isSubmitting) {
          this.isSubmitting = true
          this.$http.post('/transactionMonitorSer/examineContract', {
            id: this.$route.query.id
          }).then(data => {
            this.isSubmitting = false
            if (data.data.httpCode === 200) {
              this.$toasted.show('提交成功')
              this.$router.push('/transac-service-wait?id=' + this.$route.query.id)
            } else {
              this.$toasted.show(data.data.msg)
            }
          }).catch(err => {
            this.isSubmitting = false
            console.log(err)
            this.$toasted.show('网络错误')
          })
        }
      } else {
        this.$toasted.show('请等待审查之后上传正式合同！')
      }
    },
    stepRouter(i, name) {
      if (i === 0 && this.status >= 1) {
        this.$router.push('/submit-apply?id=' + this.$route.query.id)
      }
      if (i === 1 && this.status >= 2) {
        this.$router.push('/confirm-aptitude?id=' + this.$route.query.id)
      }
      if (i === 2 && this.status >= 3) {
        this.$router.push('/contract-review?id=' + this.$route.query.id)
      }
      if (i === 3 && this.status >= 4) {
        this.$router.push('/transac-service-wait?id=' + this.$route.query.id)
      }
      if (i === 4 && this.status >= 5) {
        this.$router.push('/transactionsurveillance?id=' + this.$route.query.id)
      }
      if (i === 5 && this.status >= 6) {
        this.$router.push('/service-evalua?id=' + this.$route.query.id)
      }
    },
    checkPendingContract() {
      if (this.pendingContracts.length === 0) {
        this.$toasted.show('暂无待审查合同')
        return
      }
      this.pendingContractShow = true
      this.$nextTick(() => {
        this.$refs.pendingFileBrowser.update()
      })
    },
    initPendingUploader() {
      this.pendingUploader = new FileUploadManager('pending-contract', 'pendingUploaderBtn', (data) => {
        let temp = data.split('/')
        let fileName = temp[temp.length - 1]
        this.$http.post('/transactionMonitorSer/business/pendingContract', {
          id: this.$route.query.id,
          address: data,
          name: fileName
        }).then(datas => {
          if (datas.data.httpCode === 200) {
            this.$toasted.show('上传成功')
            let o = {
              address: data,
              name: fileName
            }
            this.pendingContracts.push(o)
          } else {
            this.$toasted.show(datas.data.msg)
          }
        }).catch(err => {
          console.log(err)
          this.$toasted.show('网络出错')
        })
      }, (msg) => {
        this.$toasted.show(msg)
      }, true)
    },
    onFormalClick(e) {
      if (this.formalNum !== 0) {
        this.$toasted.show('已上传正式合同')
      }
    },
    initFormalUploader() {
      this.formalUploader = new FileUploadManager('formal-contract', 'formalUploaderBtn', (data) => {
        if (this.formalNum > 0) {
          this.$toasted.show('已上传正式合同')
          return
        }
        let temp = data.split('/')
        let fileName = temp[temp.length - 1]
        this.$http.post('/transactionMonitorSer/business/formalContract', {
          id: this.$route.query.id,
          address: data,
          name: fileName
        }).then(data => {
          if (data.data.httpCode === 200) {
            this.$toasted.show('上传成功')
            this.formalNum = 1
          } else {
            this.$toasted.show(data.data.msg)
          }
        }).catch(err => {
          console.log(err)
          this.$toasted.show('网络出错')
        })
      }, (msg) => {
        this.$toasted.show(msg)
      }, true)
    },
    getData() {
      this.$http.post('/transactionMonitorSer/business/read/detail', {
        id: this.$route.query.id
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.reportNum = data.data.data.contractReports.length
          if (data.data.data.pendingContracts) {
            this.pendingContracts = data.data.data.pendingContracts
          }
          if (data.data.data.contractReports) {
            this.checkContractReports = data.data.data.contractReports
          }
          if (data.data.data.contracts) {
            this.formalNum = 1
            this.address = data.data.data.contracts.address
          } else {
            this.initFormalUploader()
          }
          this.status = data.data.data.status
          if (this.status >= 4) {
            this.jurisdicShow = false
          }
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    upload(i) {
      if (i === 1) {
        this.uploadShow = true
      }
      if (i === 2) {
        this.uploadShow = true
      }
    },
    onMsgSubmit() {
      if (!this.msgContent) {
        this.$toasted.show('消息内容不能为空')
        return
      }
      this.$http.post('/message/send/message/byorder', {
        orderid: this.$route.query.id,
        orderType: 2,
        msgKind: 1,
        sendType: 1,
        msgContent: this.msgContent
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('发送成功')
          this.msgShow = false
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    onCheckContractReport() {
      if (this.checkContractReports.length) {
        this.checkContractReportShow = true
        this.$nextTick(() => {
          this.$refs.checkFileBrowser.update()
        })
      } else {
        this.$toasted.show('暂无合同审查报告')
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.box-border {
  border: 1px solid #ddd;
}

.pb {
  padding-bottom: 70px;
}

.content .box {
  margin-top: 20px;
}

.content .box .box-border-top {
  border-top: 1px solid #ddd;
}

.content .box ul li.flo-left {
  border-right: 1px solid #dddddd;
  width: 396px;
}

.content .box ul.operation-box li.flo-left {
  line-height: 113px;
  color: #282828;
}

.content .box.customize-box ul li.flo-left {
  padding: 28px 69px;
  line-height: 28px;
  color: #666666;
}

.content .box ul li.flo-right {
  width: 800px;
  padding-left: 100px;
}

.content .box ul:nth-of-type(1) .button-box {
  margin-top: 21px;
}

.content .box ul:nth-of-type(1) .button-box.jurisdicClass {
  margin-top: 47px;
}

.content .box ul:nth-of-type(1) .button-box button:nth-of-type(1) {
  margin-bottom: 10px;
}

.content .box ul:nth-of-type(2) .button-box,
.content .box ul:nth-of-type(3) .button-box {
  margin-top: 43px;
}

.content .box.customize-box ul li.flo-right {
  padding-left: 184px;
}

.content .box.customize-box ul li.flo-right .button-box {
  margin-top: 43px;
}

.next-box {
  height: 112px;
}

.next-box button {
  width: 245px;
  margin-top: 40px;
  height: 35px;
  line-height: 35px;
}

.filenum-css {
  margin: 34px 40px 0 0;
  float: left;
}

.con input[type="text"] {
  width: 240px;
  padding: 0 10px;
}

.vodal-xxbox textarea {
  width: 256px;
  height: 120px;
}

.vodal-dzbox .con {
  margin: 14px 40px 25px 40px;
}

.vodal-dzbox textarea {
  height: 70px;
  width: 240px;
}

.slider {
  width: 85%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 350px;
  margin: 28px auto;
}

table,
td,
th {
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
  /*line-height: 30px;*/
}

table {
  border-collapse: collapse;
}

table td.choose-box {
  text-align: left;
  padding-left: 35px;
}

table td.choose-box li {
  margin: 2px;
  display: inline-block;
  width: 78px;
  padding: 0;
}

table td .btn-box.seeType {
  vertical-align: bottom;
}

table td .btn-box button {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

.small-btn-css {
  margin-left: 10px;
}

textarea {
  padding: 6px;
}

.tex-css {
  width: 310px;
  height: 70px;
}

</style>
<style type="text/css">
.vodal-dialog {
  padding: 0;
}

</style>
